<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-插槽-具名插槽？？？</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

    <!--访问主键里的数据-->
    <p>为了让 user 在父级的插槽内容可用，我们可以将 user 作为 slot 元素的一个特性绑定上去</p>
    <current-user>
        <template v-slot:default="slotProps">
            {{ slotProps.user.firstName }}  {{ slotProps.user.lastName }}
        </template>
    </current-user>

    <current-user>
        <template v-slot={user}>
            {{ user.firstName }}  {{user.lastName }}
        </template>
    </current-user>

    <current-user>
        <template v-slot={user:u}>
            {{ u.firstName }}  {{u.lastName }}
        </template>
    </current-user>


</div>



<script>
    Vue.component("current-user",{

       template:"<span><slot  v-bind:user=\"user\">{{user.lastName}}</slot></span>",// id="page"和他钩上
        data:function () {
            return {
                user:{
                    lastName:"三",
                    firstName:"张",//数据封装在主键
                }
            }
        }
    });
    var app= new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>
